<template>
  <view class="reservation">
    <classifyHead title="参拍预约" />
    <view class="title">我的预约</view>
    <view class="exchange">
      <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        styleType="text"
        activeColor="#9897fe"
      ></uni-segmented-control>
    </view>
    <view class="content" style="margin-top: 40rpx;">
    <view class="mall-top" >
      <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5b01e4b0eb7e9b0fec8c.png" mode="scaleToFill" />
      <view class="mall-right">
        <view
          >Special 轻奢复古白月光手镯女士镯子饰品外出高级感2025年欧美风</view
        >
        <view class="footer">
        <view class="name">产品编号 : 345784525</view>
        <view class="name">生产价格 : 500</view>
        <view class="getScore">
        <view class="name">预计收益 : </view>
        <view class="score">
        <view class="name">权益积分 : 0.25</view>
        <view class="name">竞购积分 : 4.75</view>
        </view>
        </view>
        </view>
      </view>
    </view>
    <view class="mall-footer">
      <view class="left">
            <view>已预约</view>
            <view class="count">
              <view style="margin-right: 20rpx;color: #333;">数量:10</view>
              <view style="color: #333;">总计:<text style="color: brown;">5050</text></view>
            </view>
            <view style="margin: 10rpx 0;color: #333;">预计总收益:</view>
              <view class="count">
              <view style="margin-right: 20rpx;">权益积分:2.5 </view>
              <view>竞购积分:47.5</view>
            </view>
      </view>
  <button class="btn">委托交易</button>
    </view>
    </view>
  </view>
</template>

<script setup>
import uniSegmentedControl from "@dcloudio/uni-ui/lib/uni-segmented-control/uni-segmented-control.vue";
import classifyHead from "@/components/classifyHead.vue";
import { ref } from "vue";
const items = ["全部", "早场", "午场", "晚场"];

const current = ref(0);
</script>

<style lang="scss" scoped>
.reservation {
  .title {
    background: #9897fe;
    width: 100%;
    height: 86rpx;
    color: aliceblue;
    text-align: center;
    line-height: 86rpx;
    font-size: 40rpx;
  }
  .exchange {
    height: 66rpx;
    padding-top: 10rpx;
    font-size: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  }
  .content{
 width:calc(100% - 60rpx) ;
    height: 510rpx;
    margin:0 20rpx;
     border-radius: 20rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
     padding: 10rpx;
  .mall-top {
    display: flex;
    padding-bottom: 10rpx;
border-bottom: 1px dashed black;
    image {
      width: 238rpx;
      height: 238rpx;
      border-radius: 20rpx;
      margin-top: 20rpx;
    }
    .mall-right {
      flex: 1;
      margin-left: 20rpx;
      margin-top: 20rpx;
      color: black;
      font-weight: 500;
      .footer{
        margin-top: 20rpx;
      .name {
        font-size: 25rpx;
        color: #999;
        text-align: left;
      }
      .getScore{
        display: flex;
        font-size: 20rpx;
        color: #999;
        .score{
          margin-left: 20rpx;
        }
      }
    }
  }
}
.mall-footer{
  padding:20rpx 0;
  display: flex;
  justify-content: space-around;
  align-items:center ;
  .left{
.count{
  display: flex;
  color: #333;
}
  }
  .btn{
    background: red;
    height: 70rpx;
    width: 215rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
}
  }
}
</style>
